<template>
    <div class="home">
        <div class="title">欢迎使用图书商城后台管理系统</div>
        <div class="content">
            <div class="left">
                <div class="info">
                    目前共有用户：<span>{{ userNum }}</span
                    >人
                </div>
                <div class="info">
                    目前共有图书：<span>{{ bookNum }}</span
                    >本
                </div>
                <div class="info">
                    目前共有待发货订单：<span>{{ orderNum }}</span
                    >单
                </div>
                <div class="info">
                    已累计完成订单：<span>{{ finishedNum }}</span
                    >单
                </div>
            </div>
            <div id="right"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import service from "@/utils/request";
import { userStore } from "@/store/user";
import * as echarts from "echarts";

const userNum = ref(0);
const bookNum = ref(0);
const orderNum = ref(0);
const finishedNum = ref(0);
const pieData = reactive([]);

service.get("/user/allUser").then((res) => {
    // console.log(res.data);
    userNum.value = res.data.data.length;
});

service.get("/book/list/1/5").then((res) => {
    // console.log(res.data);
    bookNum.value = res.data.data.total;
});

service({
    method: "get",
    url: `/order/selectByOrderState?orderState=2&payState=1`,
    headers: {
        token: userStore().token,
    },
}).then((res) => {
    orderNum.value = res.data.data.length;
});

service({
    method: "get",
    url: `/order/selectByOrderState?orderState=4&payState=1`,
    headers: {
        token: userStore().token,
    },
}).then((res) => {
    finishedNum.value = res.data.data.length;
});

onMounted(async () => {
    await service.get("/category/list").then((res) => {
        let keys = res.data.data;
        keys.forEach((item) => {
            service.get(`/book/selectByCategoryId/${item.categoryID}`).then((res) => {
                // console.log(res.data);
                pieData.push({ name: item.category, value: res.data.data.length });
            });
        });
        // console.log(pieData);
    });
    setTimeout(() => {
        let myChart = echarts.init(document.getElementById("right"));
        myChart.setOption({
            legend: {
                orient: "vertical",
                right: 10,
                top: "bottom",
            },
            tooltip: {
                show: true,
            },
            title: {
                text: "在线图书数量",
            },
            series: [
                {
                    type: "pie",
                    data: pieData,
                },
            ],
        });
        window.onresize = () => {
            myChart.resize();
        };
    }, 200);
});
</script>

<style lang="scss" scoped>
.home {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .content {
        display: flex;
        height: 100%;

        .left {
            flex: 1;

            .info {
                margin-bottom: 0.4rem;

                span {
                    font-size: 1.2rem;
                    font-weight: bold;
                    margin-right: 0.2rem;
                }
            }

            .info:last-child {
                margin-bottom: 0;
            }
        }

        #right {
            flex: 2;
            height: 80%;
            width: 90%;
            justify-self: flex-start;
        }
    }
}
</style>
